<template>
  <lay-layout style="padding: 10px 0">
    <lay-side style="flex: 0 0 50px;display: flex; flex-direction: column;justify-content: space-between;" >
      <div>
        <lay-tooltip content="首页搜索" position="right">
        <div class="center" @click="toPage('/')">
          <lay-icon type="layui-icon-home"></lay-icon>
          首页
        </div>
      </lay-tooltip>
      <lay-tooltip content="文档" position="right">
        <div class="center" @click="toPage('/lux-doc')">
          <lay-icon type="layui-icon-file-b"></lay-icon>
          文档
        </div>
      </lay-tooltip>
      <lay-tooltip content="链接" position="right">
        <div class="center" @click="toPage('/lux-link')">
          <lay-icon type="layui-icon-link"></lay-icon>
          链接
        </div>
      </lay-tooltip>
      <lay-tooltip content="收藏" position="right">
        <div class="center" @click="toPage('/lux-link-all')">
          <lay-icon type="layui-icon-star"></lay-icon>
          收藏
        </div>
      </lay-tooltip>
      <lay-tooltip content="笔记" position="right">
        <div class="center" @click="toPage('/lux-note')">
          <lay-icon type="layui-icon-tabs"></lay-icon>
          笔记
        </div>
      </lay-tooltip>
      <lay-tooltip content="粘贴图片" position="right">
        <div class="center" @click="toPage('/lux-pateimg')">
          <lay-icon type="layui-icon-picture"></lay-icon>
          粘图
        </div>
      </lay-tooltip>
      <lay-tooltip content="项目表" position="right">
        <div class="center" @click="toPage('/lux-project-table')">
          <lay-icon type="layui-icon-table"></lay-icon>
          项目
        </div>
      </lay-tooltip>
      <lay-tooltip content="二维码" position="right">
        <div class="center" @click="toPage('/lux-qrcode')">
          <lay-icon type="layui-icon-app"></lay-icon>
          二维码
        </div>
      </lay-tooltip>
      <lay-tooltip content="股票监听表" position="right">
        <div class="center" @click="toPage('/lux-stock-table')">
          <lay-icon type="layui-icon-test"></lay-icon>
          股票
        </div>
      </lay-tooltip>

      <lay-tooltip content="股票走势图" position="right">
        <div class="center" @click="toPage('/lux-stock-list')">
          <lay-icon type="layui-icon-test"></lay-icon>
          股市
        </div>
      </lay-tooltip>
      <lay-tooltip content="一些工具集" position="right">
        <div class="center" @click="toPage('/lux-util')">
          <lay-icon type="layui-icon-util"></lay-icon>
          工具
        </div>
      </lay-tooltip>

      </div>
      <lay-tooltip content="系统操作" position="right">
        <div class="center" @click="visible = true">
          <lay-icon type="layui-icon-set"></lay-icon>
          系统
        </div>
      </lay-tooltip>
    </lay-side>

    <el-drawer v-model="visible" title="系统操作" direction="btt" :with-header="false">
    <span>系统操作</span>
    <div class="flex system"> 
      <lay-tooltip content="ipconfig arp" >
        <div class="center" @click="system('arp -a  | find ')">
          <lay-icon type="layui-icon-flag"></lay-icon>
          IP
        </div>
      </lay-tooltip>
       <lay-tooltip content="mspaint" >
        <div class="center" @click="system('mspaint')">
          <lay-icon type="layui-icon-theme"></lay-icon>
          画板
        </div>
      </lay-tooltip>
      <lay-tooltip content="calc" >
        <div class="center" @click="system('calc')">
          <lay-icon type="layui-icon-date"></lay-icon>
          计算器
        </div>
      </lay-tooltip>
      <lay-tooltip content="control" >
        <div class="center" @click="system('control')">
          <lay-icon type="layui-icon-console"></lay-icon>
          控制台
        </div>
      </lay-tooltip>
      <lay-tooltip content="mstsc" >
        <div class="center" @click="system('mstsc')">
          <lay-icon type="layui-icon-release"></lay-icon>
          远程
        </div>
      </lay-tooltip>
      <lay-tooltip content="regedit" >
        <div class="center" @click="system('regedit')">
          <lay-icon type="layui-icon-picture"></lay-icon>
          注册表
        </div>
      </lay-tooltip>
      <lay-tooltip content="taskmgr" >
        <div class="center" @click="system('taskmgr')">
          <lay-icon type="layui-icon-keyboard"></lay-icon>
          管理器
        </div>
      </lay-tooltip>
      <lay-tooltip content="shutdown" >
        <div class="center" @click="system('shutdown -s -t 1')">
          <lay-icon type="layui-icon-logout"></lay-icon>
          关机
        </div>
      </lay-tooltip>
      
      
    </div>
    {{ value.value }}
  </el-drawer>
 
    <lay-body>
      <lay-dropdown ref="dropdownRefEl" :trigger="['contextMenu']" alignPoint>
        <div></div>
        <keep-alive include="test">
          <router-view />
        </keep-alive>
        <template #content>
          <lay-dropdown-menu>
            <lay-dropdown-menu-item @click="open()">打开调试</lay-dropdown-menu-item>
          </lay-dropdown-menu>
        </template>
      </lay-dropdown>
    </lay-body>
  </lay-layout>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import service from "./common/api.js";
let res;
const value = ref("");
const visible = ref(false)
const router = useRouter();
const toPage = (name) => {
  router.push({ name });
};
const dropdownRefEl = ref(null);
const handleScroll = () => {
  dropdownRefEl.value.hide();
};

const open = async () => {
  alert(ipcRenderer)
  ipcRenderer.send('open', {a: 1});
};
const system = async( exec)=>{
 if(exec.includes('arp')) exec += '"0x"'
 if(exec.includes('shutdown')){
  return ElMessageBox.confirm('确定要关机吗?','注意',{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }).then(() => {
       service.system({ exec })
    }) 
 }
 res = await service.system({ exec })
 if(exec.includes('arp')){ 
  const textValue = document.createElement('textarea');
  document.body. appendChild(textValue);  
  textValue.value = res.data.split(" ")[1] 
  textValue.select();
  document.execCommand('copy');
  document.body.removeChild(textValue);
  ElMessage.success("已复制IP")
 }
}

onMounted(() => {
  const scrollEl = document.querySelector(".layui-body");
  scrollEl.addEventListener("scroll", handleScroll);
});
</script>
<style scoped>
.center {
  margin: 15px 0;
  cursor: pointer;
}
.layui-layout {
  height: 100vh;
}
.system .center{
  margin: 15px;
}
</style>
